@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>@title</title>

<!-- Le styles -->

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
<script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>

<!--                                    BOOTSTRAP TWITTER                                   -->
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap-responsive.min.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap-formhelpers.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/css.css")">
<script src="@routes.Assets.at("javascripts/bootstrap-formhelpers-selectbox.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-formhelpers-datepicker.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-formhelpers-datepicker.pt_BR.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-formhelpers-countries.en_US.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/bootstrap-formhelpers-countries.js")" type="text/javascript"></script>
<link href="../assets/css/bootstrap.css" rel="stylesheet">

<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
	background-color: #FFFFF0;
}

.hero-unit {
	background-color: #5bc0de;
}


.container {
	font-size: 20 px;
	color: white;
}

.well {
font-size: 20 px;
background-color:#E8E8E8;
color:#000000;
}

</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
		<div class="span2"><a class="brand">Filmania</a></div>
			<div class="container">
				<div class="nav-collapse collapse">
					<p class="navbar-text pull-right">
						Você está logado como: <a href="/usuario/@session.get("login")" class="navbar-link">@session.get("login")</a>
						
					</p>
					
					<ul class="nav">
						<li class="active"><a href="/">Página Inicial</a></li>
						<li><a href="/filme">Filmes</a></li>
						<li><a href="/usuario">Usuários</a></li>
						<li><a href="/noticia">Noticías</a></li>
						@if(session.get("login") != null){
						<li><a href="/usuario/@session.get("login")">Meu Perfil</a></li>
						}
						<li><a href="/inicial">Login</a></li>
						<li><a href="/usuario/novo">Cadastre-se</a></li>
						<li><a href="/logout">Sair</a></li>
				</div>
				
				
				<!--/.nav-collapse -->
			</div>	
		</div>
	</div>

	<div class="container-fluid">
	<div class="row-fluid">
  <div class="span12">
		<div class="row-fluid">
			<div class="span2">
				<div class="well sidebar-nav">
					<ul class="nav nav-list">
						<li class="nav-header">Filmes</li>
						<li class=""><a href="/filme/genero/Aventura"> Aventura</a></li>
						<li class=""><a href="/filme/genero/Ação"> Ação </a></li>
						<li class=""><a href="/filme/genero/Comédia"> Comédia </a></li>
						<li class=""><a href="/filme/genero/Comédia Romântica"> Comédia Romântica</a></li>
						<li class=""><a href="/filme/genero/Suspense"> Suspense </a></li>
						<li class=""><a href="/filme/genero/Drama"> Drama </a></li>
						<li class=""><a href="/filme/genero/Terror"> Terror </a></li>

					</ul>
				</div>
				
				<!--/.well -->
				<img src="http://gabrielgs.files.wordpress.com/2008/11/logo.png?w=450" style="width: 210px; height: 253px; border: 50;">
		
			</div>
			<!--/span-->

			<div class="span8 hero-unit">

				<!-- Main hero unit for a primary marketing message or call to action -->
				@content

				<hr>
	
				<div>
					<center><footer><p>&copy; Projeto de Desenvolvimento Web - Filmania 2013</p></footer></center>
				</div>

			
			</div>
			<div class="span2">
				<div class="well sidebar-nav">
					<ul class="nav nav-list">
					<table>
					<caption><h3>RANKING</h3></caption>
									<thead>										
											<th class="pull-left">Filme</th>
											<th align="center">Nota</th>
									
									</thead>
									<tbody class="table table-striped">
						@for(top <- Application.getRanking()) {
							<tr>
							<td>@top.titulo</td>
							<td>@top.media</td>
							</tr>	
						}
						</tbody>
					</ul>
					</div>
					</table>
					<img src="http://1.bp.blogspot.com/_zUuTkjH_Z20/TIvAUlKZzfI/AAAAAAAAASg/XPIq_vivO_w/S350/anuncie_aqui.gif" style="width: 210px; height: 253px; border: 50;">
				</div>
				
			</div>
			<!-- /container -->

				<!-- Le javascript
    ================================================== -->
			<!-- Placed at the end of the document so the pages load faster -->
			<script src="../assets/js/jquery.js"></script>
			<script src="../assets/js/bootstrap-transition.js"></script>
			<script src="../assets/js/bootstrap-alert.js"></script>
			<script src="../assets/js/bootstrap-modal.js"></script>
			<script src="../assets/js/bootstrap-dropdown.js"></script>
			<script src="../assets/js/bootstrap-scrollspy.js"></script>
			<script src="../assets/js/bootstrap-tab.js"></script>
			<script src="../assets/js/bootstrap-tooltip.js"></script>
			<script src="../assets/js/bootstrap-popover.js"></script>
			<script src="../assets/js/bootstrap-button.js"></script>
			<script src="../assets/js/bootstrap-collapse.js"></script>
			<script src="../assets/js/bootstrap-carousel.js"></script>
			<script src="../assets/js/bootstrap-typeahead.js"></script></body>
</html>